<template>
  <!-- 在服务端渲染的组件 -->

  <!-- 方法1: -->
  <!-- 
      fallback-tag: 标签
      fallback: 文字 
      相当于如果组件没有返回, 正在等待中, 则会<p>Loading...</p>
     -->
  <ClientOnly fallback-tag="p" fallback="Loading...">
    <!-- 从服务器返回的组件 -->
    <base-foo-button></base-foo-button>
  </ClientOnly>

  <br />

  <!-- 方法2: -->
  <!-- 正在从服务器请求渲染的组件 -->
  <ClientOnly>
    <!-- 组件还未渲染的loading组件 -->
    <template #fallback>
      <p>正在加载工作组件</p>
    </template>
    <!-- 从服务器返回的组件 -->
    <BaseFooWork></BaseFooWork>
  </ClientOnly>

  <com></com>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>
